<!--
 * @Author: 王灿
 * @Date: 2019-11-03 00:40:05
 * @LastEditTime: 2019-12-07 00:08:04
 * @Description: 客户管理
 * @FilePath: \scarlet-sparrow-admin\src\views\home\home-customer\index
-->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" />
    <!-- fun btn -->
    <div class="public-search">
      <el-form>
        <el-select
          v-model="status"
          clearable
          placeholder="选择状态"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          v-model="realName"
          placeholder="用户名"
          clearable
        ></el-input>
        <el-input
          v-model="mobile"
          placeholder="手机号"
          clearable
        ></el-input>
      </el-form>
      <jq-btns :btns="btns"/>
    </div>
    <!-- 客户列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table" @selection-change="onChangeSelect">
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- 姓名 -->
        <el-table-column prop="realName" label="姓名"></el-table-column>
        <!-- 昵称 -->
        <el-table-column prop="nick" label="昵称"></el-table-column>
        <!-- 手机号 -->
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <!-- 账号状态 -->
        <el-table-column prop="status" label="账号状态">
          <template slot-scope="scope">
            <span
              :class="[scope.row.status === 0 ? 'default' : scope.row.status === 1 ? 'doing' : 'over']"
              class="public-table__status"
            ></span>
            <span>{{ scope.row.status === 0 ? '禁用' : scope.row.status === 1 ? '启用' : '待完善'}}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="300" label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" @click="onCheckDetails(scope.row)">详情</el-button> -->
            <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="onSetVip(scope.row)">VIP设置</el-button>
            <el-button type="text" size="small" @click="onChangeInfo(scope.row.userId)">更改留存信息</el-button>
            <el-button
              type="text"
              size="small"
              :class="scope.row.status === 1 ? 'active' : ''"
              @click="onChangeStatus(scope.row)"
            >{{ scope.row.status === 1 ? '禁用' : '启用' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 编辑 -->
    <el-dialog :title="tabTitle" :visible.sync="isShow" :close-on-click-modal="false" width="600px">
      <customer-operate @addTableRow="onTableRow" :row="tabRow" />
    </el-dialog>

    <!-- 设置vip -->
    <el-dialog title="vip设置" :visible.sync="isVip" :close-on-click-modal="false" width="600px">
      <customer-vip @addTableRow="onTableRow" :row="tabRow" />
    </el-dialog>

    <!-- 抽屉（留存信息） -->
    <el-drawer
      title="更改留存信息"
      :visible.sync="isInfo"
      :wrapperClosable="false"
      :destroyOnClose="true"
      :show-close="show"
      direction="rtl"
      @open="onOpen"
      @close="onClose"
      @opened="onOpened"
      @closed="onClosed"
      size="80%"
      height="90%"
      ref="drawer"
    >
      <!-- 留存信息 -->
      <customer-info @addTableRow="onTableRow" :userId="userId" :isRefresh="isRefresh"/>
    </el-drawer>
  </div>
</template>
 
<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqBtns from '@/components/jq-btns/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import CustomerOperate from './customer-operate/index.vue'
import CustomerVip from './customer-vip/index.vue'
import CustomerInfo from './customer-info/index.vue'
import { getCustomerList, editUserStatus } from '@/api/home.js'
export default {
  name: 'HomeCustomer',
  components: { JqTitle, JqBtns, JqPage, CustomerOperate, CustomerVip, CustomerInfo },
  data() {
    return {
      title: { label: '客户管理', flag: false, searchFlag: false },
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      tabTitle: '',
      tabRow: {},
      isShow: false,
      btns: [
        {type: 'danger', label: '重置密码', selection: []}
      ],
      statusOptions: [
        {label: '全部', value: ''},
        {label: '禁用', value: 0},
        {label: '启用', value: 1},
        {label: '待完善', value: 2}
      ],
      isVip: false,
      userId: 0,
      show: false,
      isInfo: false,
      isRefresh: false,
      status: '',
      realName: '',
      mobile: ''
    }
  },
  created() {
    this.onGetCustomerList()
  },
  watch: {
    // 监听分页
    pageNum() {
      this.onGetCustomerList()
    },
    pageSize() {
      this.onGetCustomerList()
    },
    // 刷新
    isRefresh() {
      if (this.isRefresh) {
        this.onGetCustomerList()
      }
    },
    // 搜索
    mobile() {
      this.pageNum = 1
      this.onGetCustomerList()
    },
    realName() {
      this.pageNum = 1
      this.onGetCustomerList()
    },
    status() {
      this.pageNum = 1
      this.onGetCustomerList()
    }
  },
  methods: {
    // 勾选用户
    onChangeSelect(selection) {
      this.btns[0].selection = selection
    },
    // 客户列表
    onGetCustomerList() {
      this.tableData = []
      getCustomerList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.status,
        mobile: this.mobile,
        realName: this.realName
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 启用 / 禁用
    onChangeStatus(row) {
      let title = row.status === 1 ? "禁用" : "启用"
      this.$confirm('此操作将'+ title +'该账号，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let form = new FormData()
          form.append('userId', row.userId) 
          editUserStatus(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetCustomerList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 详情
    onCheckDetails(row) {},
    // 父子组件通讯
    onTableRow(data) {
      this.isShow = data.isShow
      this.isVip = data.isShow
      this.isInfo = data.isShow
      this.isRefresh = data.isRefresh ? data.isRefresh : false
      this.tabRow = {}
      this.tabTitle = ''
      this.userId = 0
    },
    // 编辑
    onEdit(row) {
      this.tabRow = row
      this.isShow = true
      this.isRefresh = false
      this.tabTitle = '编辑'
    },
    // 分页
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 设置vip
    onSetVip(row) {
      this.tabRow = row
      this.isRefresh = false
      this.isVip = true
    },
    // 打开 -- 动画结束回调
    onOpen() {
      if (this.tabTitle !== '编辑') {
        this.tabRow = {}
      }
    },
    onOpened() {
      this.show = true
    },
    // 关闭 -- 动画结束回调
    onClose() {
      this.show = false
    },
    onClosed() {
      this.show = false
      this.isSkuShow = false
      this.productId = ''
    },
    // 更改留存信息
    onChangeInfo(userId) {
      this.userId = userId
      this.isRefresh = false
      this.isInfo = true
    }
  }
}
</script>

<style lang="scss">
.public-search {
  margin: 10px 0;
  padding: 0 10px;
  @include row;
  .el-form {
    margin-right: 10px;
    .el-input {
      &.el-input--suffix {
        width: 220px;
      }
    }
  }
}
</style>